<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">
<h:head>
	<title>Aplicacion con RichFaces</title>
</h:head>
<h:body>
	<h:outputStylesheet library="css" name="application.css" target="head" />
	<f:view>
		<div align="center">
			<div style="width: 800px;" align="left">
				<rich:panel>
					<f:facet name="header">
						<h:outputText
							value="Validacion con anotaciones (Requiere JSR-303)" />
					</f:facet>
					<h:form>
						<h:panelGrid columns="3">
							<h:outputText value="Nombre: " />
							<rich:inplaceInput id="txtNombre"
								value="#{ejemValidatorBean.nombre}"
								defaultLabel="Escriba su nombre" required="true"
								requiredMessage="Escriba su nombre, por favor." />
							<rich:message for="txtNombre" />

							<h:outputText value="Correo: " />
							<rich:inplaceInput id="txtEmail"
								value="#{ejemValidatorBean.email}"
								defaultLabel="user@domain.com" required="true"
								requiredMessage="Escriba su correo, por favor." />
							<rich:message for="txtEmail" />

							<h:outputText value="Edad: " />
							<rich:inputNumberSpinner id="numEdad"
								value="#{ejemValidatorBean.edad}" />
							<rich:message for="numEdad" />
						</h:panelGrid>
						<a4j:commandButton value="Validar" execute="@form" render="@form" />
					</h:form>
				</rich:panel>
				<rich:panel>
					<f:facet name="header">
						<h:outputText value="Validacion con rich:validator" />
					</f:facet>
					<h:form>
						<h:outputText value="50 caracteres máximo" />
						<h:panelGrid columns="3">
							<h:outputText value="Direccion:" />
							<h:inputTextarea id="txtDireccion"
								value="#{ejemValidatorBean.direccion}">
								<f:validateLength maximum="50" />
								<f:validateRequired />
								<rich:validator event="keyup" />
							</h:inputTextarea>
							<rich:message for="txtDireccion" />
						</h:panelGrid>
						<h:selectBooleanCheckbox value="#{ejemValidatorBean.agree}"
							id="agree" validator="#{ejemValidatorBean.validateAgree}">
							<rich:validator />
						</h:selectBooleanCheckbox>
						<h:outputText value="Acepto los terminos y condiciones" />
						<rich:message for="agree" />
					</h:form>
				</rich:panel>
				<rich:panel>
					<f:facet name="header">
						<h:outputText value="Validacion con rich:graphValidator" />
					</f:facet>
					<h:form>
						<rich:graphValidator value="#{userBean}" id="passValidator">
							<rich:messages globalOnly="true"/>
							<rich:messages for="passValidator"/>
							<h:panelGrid columns="3">
								<h:outputText value="Password" />
								<h:inputSecret id="txtPassword"
									value="#{userBean.password}" />
								<rich:message for="txtPassword" />

								<h:outputText value="Confirmar" />
								<h:inputSecret id="txtConfirm"
									value="#{userBean.confirm}" />
								<rich:message for="txtConfirm" />
							</h:panelGrid>
							<a4j:commandButton value="Cambiar password" 
								action="#{userBean.cambiarPassword}"/>
						</rich:graphValidator>
					</h:form>
				</rich:panel>
			</div>
		</div>
	</f:view>
</h:body>
</html>